<template>
    <div class="link-table-box">
        <div
            v-for="item in data"
            :key="item.id"
            class="item-box"
            :class="{ 'item-box-select': selectList?.some(el => el.id == item.id) }"
            @click="changeMaterial(item)">
            <div class="choose-box">
                <img
                    v-if="selectList?.some(el => el.id == item.id)"
                    src="//img.static-keyid.cn/toolspace/scrm/2023/09/1693986289248fcber26epvebpzes.png"
                    alt="" />
            </div>
            <div class="text-box">
                <div class="link-title">
                    <span>{{ item.title }}</span>
                    <img
                        v-if="item.type == 7"
                        class="icon_img"
                        src="//img.static-keyid.cn/toolspace/scrm/2023/09/1694163829344ysbjjqh3vw9pbimc.png"
                        alt="" />
                </div>
                <div class="link-desc">
                    {{ item.desc }}
                </div>
            </div>
            <el-image
                :src="item.cover_image_url"
                :class="{ icon_radar: item.is_radar == 1 }"
                class="link-img"
                fit="cover"
                lazy></el-image>
        </div>
    </div>
    <div v-if="!props.data?.length" class="empty-box">
        <Empty />
    </div>
</template>

<script setup lang="ts">
import Empty from '../components/Empty.vue';
import { ref, onMounted, computed, withDefaults } from 'vue';
import { ElMessage } from 'element-plus';
import { isTextBeyond } from '../../utils/index';

interface Props {
    /** 选中数据 */
    modelValue: Array<any>;
    /** table数据 */
    data: Array<any>;
    /** 是否多选 */
    multiple?: boolean;
    /** 选中素材总数 */
    selectTotalNum: number;
    /** 剩余可选中数量 */
    remainNum: number;
    /** 场景值 */
    sceneValue?: string;
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: () => [],
    data: () => [],
    remainNum: 1,
    multiple: true,
    selectTotalNum: 9
});

const emit = defineEmits(['update:modelValue']);

const selectList = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

const disabled = ref(true);
/**
 * 鼠标移动是否展示tooltips
 * @param e
 */
const handleMouse = e => {
    disabled.value = isTextBeyond(e);
};
/**
 * 选中/取消
 * @param item
 */
const changeMaterial = (item: any) => {
    const index = selectList.value.findIndex(el => el.id == item.id);

    if (props.remainNum <= 0 && index == -1) {
        if (props.sceneValue == 'friend') {
            ElMessage.error(`最多可选${props.selectTotalNum}个链接`);
        } else {
            ElMessage.error(`最多可选${props.selectTotalNum}个素材`);
        }
        return;
    }
    if (props.multiple) {
        if (index == -1) {
            selectList.value.push({ ...item, sortTime: +new Date() });
        } else {
            selectList.value.splice(index, 1);
        }
    } else {
        selectList.value.splice(0);
        selectList.value.push({ ...item, sortTime: +new Date() });
    }
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.link-table-box {
    display: flex;
    flex-wrap: wrap;

    .item-box {
        margin: 0 15px 14px 0;
        padding: 5px;
        width: 278px;
        border: 1px solid #eaeaea;
        background: #f7f7f7;
        border-radius: 1px;
        display: flex;
        justify-content: space-between;
        position: relative;
        cursor: pointer;

        .choose-box {
            width: 14px;
            height: 14px;
            background: white;
            border: 1px solid #eaeaea;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .text-box {
            margin: 0 6px;
            width: 188px;

            .link-title {
                margin-bottom: 6px;
                display: flex;
                align-items: center;
                font-size: 14px;
                font-family: STHeitiSC-Medium, STHeitiSC;
                font-weight: 500;
                color: #33302d;
                line-height: 16px;

                span {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                .icon_img {
                    margin-left: 2px;
                    width: 12px;
                    height: 12px;
                }
            }

            .link-desc {
                font-size: 12px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                color: #969696;
                line-height: 14px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                white-space: normal;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }

        .link-img {
            flex: 1;
            width: 60px;
            height: 60px;
            border-radius: 2px;
        }

        .icon_radar {
            position: relative;

            &::after {
                content: '';
                width: 15px;
                height: 15px;
                background: url('https://img.static-keyid.cn/toolspace/scrm/2023/09/1693986312004j1tg8uz6944ojpzu.png')
                    no-repeat center;
                background-size: cover;
                position: absolute;
                top: 3px;
                right: 3px;
            }
        }
    }

    .item-box-select {
        border: 1px solid #ff6b00;
    }
}

.empty-box {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
